<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/global.css">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/index.css">
    <script src="./js/flexible.js"></script>
    <script src="./js/jquery-1.12.4.min.js"></script>
</head>

<body>
    <!-- 头部 -->
    <div class="head dispfx flxvc flxhc">
        <img src="./image/矢量智能对象1.png" alt="">
        <p>选择门店</p>
    </div>
    <!-- 1 -->
    <div class="one">
        <ul>
            <li>
                <p>城市</p>
                <p>广东省 广州市 <img src="./image/Path.png" alt=""></p>
            </li>
            <li>
                <p>门店</p>
                <p style="color: #AAAAAA;" class="xz">请选择门店<img src="./image/Path.png" alt="" ></p>
            </li>
        </ul>
        <!-- 灯罩效果 -->
        <div class="deng" style="display: none;">

        </div>
    </div>
    <!-- 底部 -->
    <div class="dibu dispfx flxvc flxhc">
        确定
    </div>

    <!-- 选择城市 -->
    <div class="pop-up" style="display: none;">
        <p class="pop-up-p dispfx flxvc flxspb"><span class="close">取消</span><span class="close">确定</span></p>
        <div class="pop-ul">
            <ul>
                <li>天河门店</li>
                <li class="pop-ul-li3">海珠门店</li>
                <li>白云门店</li>
            </ul>
        </div>
    </div>
</body>
<script>
    $('.xz').click(function(){
        $('.pop-up').css('display','block')
        $('.deng').css('display','block')
    })
    $('.close').click(function(){
        $('.pop-up').css('display','none')
        $('.deng').css('display','none')
    })
</script>
</html>